<template>
  <div class="hot">
    <div class="carousel" v-if="data">
    <div class="index_tit">
      <h1>歌单推荐</h1>
    </div>
    <ul class="tab-nav">
      <li @click="catChange('流行')" :class="cat === '流行' ? 'active' : ''">为你推荐</li>
      <li @click="catChange('华语')" :class="cat === '华语' ? 'active' : ''">华语</li>
      <li @click="catChange('古风')" :class="cat === '古风' ? 'active' : ''">古风</li>
      <li @click="catChange('欧美')" :class="cat === '欧美' ? 'active' : ''">欧美</li>
    </ul>
    <div class="block">
      <el-row v-for="item in dataChange" :key="item.id">
        <router-link :to="`/playlist?id=${item.id}`">
          <el-card :body-style="{ padding: '10px' }">
            <div class="img">
              <img :src="item.coverImgUrl" class="image" />
            </div>
            <h4>
              <span>{{ item.name }}</span>
            </h4>
            <div class="listen_num">
              播放量: {{ (item.playCount / 1000).toFixed(1) }}万
            </div>
          </el-card>
        </router-link>
      </el-row>
    </div>
    <el-button class="left" @click="addClick(-1)">
      <i class="iconfont icon-zuojiantou1"></i>
    </el-button>
    <el-button class="right" @click="addClick(1)">
      <i class="iconfont icon-youjiantou"></i>
    </el-button>
    <ul class="ul">
      <li
        :class="item == index + 1 ? 'active' : ''"
        v-for="(item, i) in leng"
        :key="i"
        @click="indexChange(item - 1)"
      ></li>
    </ul>
  </div>
  </div>
</template>

<script>
import { getHotData } from "@/api";
import { ref, reactive, onBeforeMount, computed } from "vue";
export default {
  name: "Hot",
  setup() {
    let data = reactive({ arr: [] });
    let index = ref(0);
    let leng = ref(0);
    let num = 5;
    let cat = ref('流行')
    onBeforeMount(async () => {
      await getHotData(cat.value).then((res) => {
        if (res) {
          data.arr = res.data.playlists;
          leng.value = Math.ceil(data.arr.length / num);
        }
      });
    });
    function addClick(i) {
      index.value += i;
      if (index.value >= leng.value) {
        index.value = 0;
      }
      if (index.value < 0) {
        index.value = leng.value - 1;
      }
    }
    function indexChange(i) {
      index.value = i;
    }
    async function catChange (i) {
      cat.value = i;
      await getHotData(cat.value).then((res) => {
        if (res) {
          data.arr = res.data.playlists;
          leng.value = Math.ceil(data.arr.length / num);
        }
      });
      indexChange(0)
    }
    let dataChange = computed(() => {
      return data.arr.slice(
        index.value * num,
        index.value * num + num > data.arr.length
          ? data.arr.length
          : index.value * num + num
      );
    });
    return { data, dataChange, addClick, leng, index, indexChange,catChange,cat };
  },
};
</script>

<style lang="less" scoped>
.hot {
  background: var(--color-background);
  max-width: 1440px;
  max-height: 500px;
  min-height: 420px;
  margin: 0 auto;
}
.carousel {
  padding-bottom: 40px;
  position: relative;
  .index_tit {
    font-size: var(--font-size);
  }
  .tab-nav {
    padding: 0;
    list-style: none;
    display: flex;
    width: 60%;
    margin: 20px auto 10px;
    justify-content: space-between;
    li{
      padding: 8px 12px;
    }
    li:hover{
      color: #31c27c;
      cursor: pointer;
    }
    .active {
      color: #31c27c;
    }
  }
  .block {
    display: flex;
    .el-row {
      width: 20%;
      a {
        text-decoration: none;
      }
      .el-card {
        width: 100%;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        text-align: left;
        .img {
          overflow: hidden;
          .image:hover {
            transform: scale(1.1);
          }
          .image {
            width: 100%;
            display: block;
            transition: transform 500ms;
          }
        }
        h4 {
          font-size: 16px;
          cursor: pointer;
          margin: 15px 0 5px;
          span {
            font-weight: 400;
            display: block;
            width: 100%;
            height: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span:hover {
            color: #31c27c;
          }
        }
        .listen_num {
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
  .el-button {
    position: absolute;
    z-index: 9;
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translate(0, -50%);
    background: #909399;
    border: 0;
    opacity: 0;
    transition: all 500ms;
    .iconfont {
      font-size: 32px;
      color: white;
    }
  }
  .left {
    left: -60px;
  }
  .right {
    right: -60px;
  }
  .el-button:hover {
    background: #606266;
  }
  .ul {
    position: absolute;
    left: 50%;
    // bottom: -20px;
    display: flex;
    transform: translate(-50%, -50%);
    li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      display: block;
      margin-right: 12px;
      cursor: pointer;
    }
    .active {
      background: rgba(0, 0, 0, 0.4);
    }
  }
}
.carousel:hover {
  .left {
    left: 10px;
    opacity: 0.7;
  }
  .right {
    right: 10px;
    opacity: 0.7;
  }
}
</style>
